<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Components</title>
		<link href="css/bootstrap.min.css" rel="stylesheet" />
	</head>
	<body>
		<!--
			字体图标  下拉菜单 按钮  按钮式下拉菜单
		-->
		<!--
			字体图标  出于性能的考虑,所有图标都需要一个的基类和一个对应图标的子类 ,而且之间是由一个空格存在的
			 所有的图标类必须要在<span></span> 中进行承载
		-->
		
		<!--
			下拉菜单:
		-->
		<div class="container">
			<!--要在其最外层添加-->
			<div class="dropdown pull-right">
				<!--按钮向右 pull-right" -->
				<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
					下拉菜单
					<span class="caret"></span>
				</button>
				<!--内容 dropdown-menu-right向右-->
				<ul class="dropdown-menu dropdown-menu-right" role="menu" arua-labeledby="dropdownMenu1">
					<!--添加标题-->
					<!--
						<li role="presentation" class="dropdown-header">大写的一到四</li>
					-->
					<li><a href="#" role="menuitem"></a>一</li>
					<li><a href="#" role="menuitem"></a>二</li>
					<li><a href="#" role="menuitem"></a>三</li>
					<li><a href="#" role="menuitem"></a>四</li>
					<!--<li role="presentation" class="dropdown-header">小写的1到4</li>-->
					<li role="presentation" class="divider"></li>
					<li><a href="#" role="menuitem"></a>1</li>
					<li><a href="#" role="menuitem"></a>2</li>
					<li class="disabled"><a href="#" role="menuitem"></a>3</li>
					<li><a href="#" role="menuitem"></a>4</li>
				</ul>
			</div>
		</div>
		<!--
			需要引入js 文件
			bootstrap.js 是依赖于jquery 的 所以先引入jquery 在引入bootstrap
		-->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
	</body>
</html>
